<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { ref, reactive, computed, onMounted } from 'vue'
import { useCounterStore } from './stores/counter'
import { storeToRefs } from 'pinia'

const store = useCounterStore()
const { count, obj, doubleCount } = storeToRefs(store)  //响应式
// const { count } = store   //非响应式
const obj2 = ref({
  address: '山东交通职业学院',
  ...obj.value
})
const { increment } = store
const set = () => {
  setTimeout(() => {
    count.value = 999
  }, 2000)
}
// function set(){
//   setTimeout(() => {
//     count.value = 999
//   }, 2000)
// }
</script>

<template>
  <div class="box">
    <!-- <div>{{ count }}</div>
    <div>{{ doubleCount }}</div>
    <div>{{ obj2 }}</div>
    <div>
      <button @click="increment">++</button>
      <button @click="count = 6">6</button>
      <button @click="set">999</button>
    </div> -->
    <div>
      <RouterView />
    </div>
  </div>
</template>

<style scoped lang="scss"></style>